<template>
  <div>
    <zm-panel title="移交确认" :visible.sync="value" @change="close">
      <zm-form label-width="100px" :model="form" :rules="formRule" ref="zmForm" size="small">
        <div class="text-main">
          <p class="info">
            1.
            订单移交：确认移交则将该账号下审批状态（已通过）、订单状态（成功订单、部分退款）、回款状态（存在未回款的）的订单将移交给所选人员'
          </p>
          <p class="info">
            2. 订单移交则订单对应客户也同步移交，请将同一客户下未回款的订单全部移交给同一人员
          </p>
        </div>

        <zm-form-item label="移交人员" prop="userId">
          <el-cascader
            placeholder="请选择移交人员"
            v-model="form.accountId"
            :props="{
              label: 'name',
              value: 'id',
              children: 'accountData'
            }"
            :options="accountList"
            filterable
            clearable
            class="w200"
          ></el-cascader>
        </zm-form-item>
        <zm-form-item class="plr10" label="选择销售单" prop="select">
          <el-button type="primary" @click="select">选 择</el-button>
          {{ ` 已选 ${orderNos.length} 条数据` }}
        </zm-form-item>
      </zm-form>
      <div slot="footer" class="tr">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </zm-panel>
    <select-order-employer
      v-if="selectVisible"
      v-model="selectVisible"
      :obj="obj"
      @select="selectData"
      @selectId="selectId"
      :checked="checkedId"
    ></select-order-employer>
  </div>
</template>

<script>
import panelMixin from '@/mixins/panelMixin'
import { formRule } from '../const'
import { getAccountList } from '@/api/src/public'
import systemAccountApis from '@/api/src/systemAccount'

import SelectOrderEmployer from './SelectOrderEmployer.vue'
export default {
  components: { SelectOrderEmployer },
  mixins: [panelMixin],
  props: {},
  data() {
    return {
      form: {
        accountId: ''
      },
      formRule: formRule,
      accountList: [],
      menuList: [],
      orderNos: [],
      checkedId: [],
      selectVisible: false
    }
  },
  computed: {},
  created() {
    this.init()
  },
  methods: {
    async init() {
      this.accountList = await getAccountList({ typeList: 'transition' })
    },
    async submit() {
      // console.log('submit', this.orderNos.join(','))
      const accountId = this.form.accountId[this.form.accountId.length - 1]
      const params = {
        accountId,
        orderNo: this.orderNos.join(','),
        handOverId: this.obj.id
      }
      console.log('params', params)
      await systemAccountApis.handOver(params)
      this.$message.success('操作成功')
      this.close()
    },
    select() {
      this.selectVisible = true
    },
    selectData(data) {
      console.log('selectData', data)
      this.orderNos = data
    },
    selectId(data) {
      console.log('selectId', data)
      this.checkedId = data
    }
  }
}
</script>

<style lang="scss">
.text-main {
  background: rgba(255, 191, 0, 0.1);
  padding: 15px;
  margin: 20px;
  .info {
    color: #f7ad60;
    margin-top: 5px;
  }
}
</style>
